<template>
  <div>
    <h1>筛选商品</h1>
    分类：
    <el-select  v-model="query.category" clearable placeholder="选择">
      <el-option
        v-for="item in categorys"
        :key="item"
        :label="item"
        :value="item"
      />
    </el-select>

    <span>搜索条件：</span>
    <el-input v-model="query.search" placeholder="请输入关键词" />
    <el-button type="primary" @click="searchFn">查询</el-button>
    <el-table :data="list" style="width: 100%" v-loading="loading">
      <el-table-column prop="proid" label="Date" width="180" />
      <el-table-column label="图片" width="180" >
        <template #default="scope">
            <img class="img" :src="scope.row.img1">
        </template>
      </el-table-column>
      <el-table-column prop="proname" label="名称" width="180" />
      <el-table-column prop="brand" label="品牌" width="100" />
      <el-table-column prop="originprice" label="价格" width="100" />
      <el-table-column prop="discount" label="折扣" width="100" />
      <el-table-column prop="sales" label="销量" width="150" />
      <el-table-column prop="stock" label="库存" width="180" />
      <el-table-column label="是否推荐" width="100" >
        <template #default="scope">
            <el-switch v-model="scope.row.isrecommend" />
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import service from "../../../utils/service";

const input = ref("");
const value = ref("");
const loading = ref(true)

//定义了分类的数据
const categorys = reactive<string[]>([]);

//获取分类
const getCategorys = () =>{
    service({
        url:"pro/getCategory"
    }).then(res=>{
        if(res.data.code === "200"){
            categorys.length = 0
            categorys.push(...res.data.data)
        }
    })
}
getCategorys()

//定义查询条件
const query = reactive<{
    category?:string,
    search?:string
}>({
    category:"",
    search:""
})

//定义查询的结果（表格里的数据）
interface IGoods{
    brand:string,
    category:string,
    desc:string,
    discount:string,
    img1:string,
    isrecommend:string,
    issale:string,
    isseckill: number,
    originprice: number,
    proid: string,
    proname: string,
    sales: number,
    stock: number
}

const list = reactive<IGoods[]>([])

//筛选商品
const searchFn = () =>{
    service({
        url:"pro/searchPro",
        method:"post",
        data:{
            category:query.category,
            search:query.search
        }
    }).then(res=>{
        if(res.data.code === "200"){
            list.length = 0
            list.push(...res.data.data)
            loading .value = false
        }
    })
}
searchFn()
</script>

<style scoped>
.el-input {
  width: 400px;
}
span {
  margin-left: 50px;
}
.el-button {
  margin-left: 10px;
}
.img {
    width: 200px;
    height: 150px;
}
</style>